<template>
  <view class="viewport">
    <view class="content">
      <view class="item" v-for="item in addressList" :key="item.id">
        <uni-swipe-action>
          <uni-swipe-action-item :right-options="options" @click="bindClick(item.id)">
            <view class="inner" @tap="onChangeAddress(item)">
              <view class="top">
                <view class="user">
                  <text class="name">{{ item.receiver }}</text>
                  <text class="phone">{{ item.contact }}</text>
                  <text class="badge" v-if="item.isDefault">默认</text>
                </view>
                <navigator
                  class="update"
                  hover-class="none"
                  :url="`/pagesMember/address-form/address-form?id=${item.id}`"
                  >修改
                </navigator>
              </view>
              <view class="address"> {{ item.fullLocation }} {{ item.address }} </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>

    <view class="add-btn">
      <navigator class="btn" url="/pagesMember/address-form/address-form">新建地址</navigator>
      <!-- <button class="btn">新建地址</button> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { TAddressResult } from '@/types/address'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import Api from '@/services'
import type { TOrderUserAddress } from '@/types/order'
import { useAddressStore } from '@/stores/modules/address'

const addressList = ref<TAddressResult[]>()

const options: UniHelper.UniSwipeActionItemOption[] = [
  {
    text: '删除',
    style: {
      backgroundColor: 'red',
      color: '#fff',
      fontSize: '26rpx',
    },
  },
]

const getAddressList = async () => {
  const res = await Api.LoginAPI.getAddressList()
  addressList.value = res.result
}

const bindClick = async (id: string) => {
  await Api.LoginAPI.deleteAddress(id)
  uni.showToast({
    icon: 'success',
    title: '删除成功',
  })
  getAddressList()
}
onLoad(() => {
  getAddressList()
})

onShow(() => {
  getAddressList()
})

const onChangeAddress = (item: TOrderUserAddress) => {
  useAddressStore().changeSelectedAddress(item)
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.viewport {
  height: 100vh;
  padding: 20rpx 20rpx 110rpx;
  background-color: #f4f4f4;
  .content {
    padding: 0 20rpx;
    background-color: #fff;
    .item {
      position: relative;
      padding: 20rpx 0;
      border-bottom: 1px solid #ddd;
      .inner {
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          // background-color: #21b191;
          .user {
            text {
              margin-right: 10rpx;
              font-size: 28rpx;
              line-height: 60rpx;

              &.badge {
                padding: 0 10rpx;
                font-size: 24rpx;
                color: #21b191;
                border: 1px solid #21b191;
                border-radius: 10rpx;
              }
            }
          }
          .update {
            height: 30rpx;
            line-height: 30rpx;
            width: 100rpx;
            color: #999;
            // background-color: #21b191;
            font-size: 28rpx;
            text-align: center;
            border-left: 1px solid #999;
          }
        }
        .address {
          font-size: 30rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }

  .add-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 20rpx;
    width: 100%;
    background-color: #fff;
    .btn {
      padding: 0;
      margin: 0;
      border: 0;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 32rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
      background-color: #27ba9b;
    }
  }
}
</style>
